<div ng-init="vm.init()" ng-class="{'fullscreen': vm.navbar.view.fullscreen.checked}">
  <!-- navbar -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="javascript:void(0)"><i class="fa fa-book"></i> Cloudnote 牧云笔记</a>
      </div>
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">文件 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="dropdown-submenu" ng-class="{'hover':vm.navbar.file['new'].enabled}">
                <button class="btn btn-default" ng-disabled="!vm.navbar.file['new'].enabled">
                    <i class="fa fa-file-o pull-left"></i> 新建</button>
                <ul class="dropdown-menu">
                  <li><button class="btn btn-default" ng-disabled="!vm.navbar.file['new'].module.enabled"
                      ng-click="vm.navbar.file['new'].module.click()"><i class="fa fa-th-large pull-left"></i> 模块</button></li>
                  <li class="divider"></li>
                  <li><button class="btn btn-default" ng-disabled="!vm.navbar.file['new'].file.enabled"
                      ng-click="vm.navbar.file['new'].file.click()"><i class="fa fa-file pull-left"></i> 文件</button></li>
                </ul>
              </li>
              <li><a href="javascript:void(0)" ngf-max-size="'5MB'" ngf-select="vm.navbar.file.open.click($file)">
                <i class="fa fa-folder-open-o pull-left"></i> 打开...</a></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.save.enabled"
                  ng-click="vm.navbar.file.save.click()">
                <i class="fa fa-save pull-left"></i> 保存 <span class="pull-right">Ctrl+S</span></button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.saveAs.enabled"
                  ng-click="vm.navbar.file.saveAs.click()"><i class="fa fa-share-square-o pull-left"></i> 另存为...</button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.refresh.enabled"
                  ng-click="vm.navbar.file.refresh.click()"><i class="fa fa-refresh pull-left"></i> 刷新</button></li>
              <li><button class="btn btn-default" ng-click="vm.navbar.file.search.click()">
                  <i class="fa fa-binoculars pull-left"></i> 搜索... <span class="pull-right">Ctrl+H</span></button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.history.enabled"
                  ng-click="vm.navbar.file.history.click()"><i class="fa fa-history pull-left"></i> 历史</button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.close.enabled"
                  ng-click="vm.navbar.file.close.click()"><i class="fa fa-window-close-o pull-left"></i> 关闭</button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.file.closeAll.enabled"
                  ng-click="vm.navbar.file.closeAll.click()"><i class="fa fa-window-restore pull-left"></i> 全部关闭</button></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">编辑 <span class="caret"></span></a>
            <ul class="dropdown-menu" style="min-width:210px">
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.undo.enabled"
                  ng-click="vm.navbar.edit.undo.click()">
                  <i class="fa fa-undo pull-left"></i> 撤销 <span class="pull-right">Ctrl+Z</span></button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.redo.enabled"
                  ng-click="vm.navbar.edit.redo.click()">
                  <i class="fa fa-repeat pull-left"></i> 重做 <span class="pull-right">Ctrl+Y</span></button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.cut.enabled"
                  ng-click="vm.navbar.edit.cut.click()">
                  <i class="fa fa-cut pull-left"></i> 剪切 <span class="pull-right">Ctrl+X</span></button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.copy.enabled"
                  ng-click="vm.navbar.edit.copy.click()">
                  <i class="fa fa-copy pull-left"></i> 复制 <span class="pull-right">Ctrl+C</span></button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.paste.enabled"
                  ng-click="vm.navbar.edit.paste.click()">
                  <i class="fa fa-paste pull-left"></i> 粘贴 <span class="pull-right">Ctrl+V</span></button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.selectAll.enabled"
                  ng-click="vm.navbar.edit.selectAll.click()">
                  <i class="fa fa-clone pull-left"></i> 全选 <span class="pull-right">Ctrl+A</span></button></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.delete.enabled"
                  ng-click="vm.navbar.edit.delete.click()">
                  <i class="fa fa-trash-o pull-left"></i> 删除 <span class="pull-right">Delete</span></button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.find.enabled"
                  ng-click="vm.navbar.edit.find.click()">
                  <i class="fa fa-search pull-left"></i> 查找/替换... <span class="pull-right">Ctrl+F</span></button></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.edit.format.enabled"
                  ng-click="vm.navbar.edit.format.click()">
                  <i class="fa fa-code pull-left"></i> 格式化 <span class="pull-right">Ctrl+Shift+F</span></button></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">视图 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)" ng-click="vm.navbar.view.autowrap.click()">
                  <i class="fa fa-check pull-left" ng-if="vm.navbar.view.autowrap.checked"></i> 自动换行</a></li>
              <li class="dropdown-submenu hover">
                <a href="javascript:void(0)">显示</a>
                <ul class="dropdown-menu">
                  <li><a href="javascript:void(0)" ng-click="vm.navbar.view.show.lineno.click()">
                      <i class="fa fa-check pull-left" ng-if="vm.navbar.view.show.lineno.checked"></i> 行号</a></li>
                  <li><a href="javascript:void(0)" ng-click="vm.navbar.view.show.printline.click()">
                      <i class="fa fa-check pull-left" ng-if="vm.navbar.view.show.printline.checked"></i> 打印线</a></li>
                  <li><a href="javascript:void(0)" ng-click="vm.navbar.view.show.whitespace.click()">
                      <i class="fa fa-check pull-left" ng-if="vm.navbar.view.show.whitespace.checked"></i> 空白字符</a></li>
                </ul>
              </li>
              <li class="divider"></li>
              <li><a href="javascript:void(0)" ng-click="vm.navbar.view.sidebar.click()">
                  <i class="fa fa-check pull-left" ng-if="vm.navbar.view.sidebar.checked"></i> 目录栏</a></li>
              <li><a href="javascript:void(0)" ng-click="vm.navbar.view.toolbar.click()">
                  <i class="fa fa-check pull-left" ng-if="vm.navbar.view.toolbar.checked"></i> 工具栏</a></li>
              <li><a href="javascript:void(0)" ng-click="vm.navbar.view.statusbar.click()">
                  <i class="fa fa-check pull-left" ng-if="vm.navbar.view.statusbar.checked"></i> 状态栏</a></li>
              <li class="divider"></li>
              <li><button class="btn btn-default" ng-disabled="!vm.navbar.view.fullscreen.enabled"
                  ng-click="vm.navbar.view.fullscreen.click()">
                  <i class="fa fa-window-maximize pull-left"></i> 全屏</button></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">工具 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="dropdown-submenu hover">
                <a href="javascript:void(0)"><i class="fa fa-cog pull-left"></i> 主题</a>
                <ul class="dropdown-menu">
                  <li ng-repeat="theme in vm.navbar.tool.theme.themes">
                    <a href="javascript:void(0)" ng-click="vm.navbar.tool.theme.click(theme)">
                        <i class="fa fa-check pull-left" ng-if="vm.navbar.tool.theme.selected == theme"></i> {{theme}}</a>
                  </li>
                </ul>
              </li>
              <li class="divider"></li>
              <li class="dropdown-submenu hover">
                <a href="javascript:void(0)"><i class="fa fa-font pull-left"></i> 字体大小</a>
                <ul class="dropdown-menu" style="min-width:120px">
                  <li ng-repeat="font in vm.navbar.tool.font.fonts">
                    <a href="javascript:void(0)" ng-style="{'font-size':font+'px'}"
                        ng-click="vm.navbar.tool.font.click(font)">
                        <i class="fa fa-check pull-left" ng-if="vm.navbar.tool.font.selected == font"></i> {{font}}px</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">帮助 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)" ng-click="vm.navbar.help.shortcut.click()">
                  <i class="fa fa-keyboard-o pull-left"></i> 快捷键</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu hover">
                <a href="javascript:void(0)"><i class="fa fa-user-o pull-left"></i> 用户</a>
                <ul class="dropdown-menu">
                  <li ng-if="!sessionUser.email"><a href="javascript:void(0)"
                      ng-click="vm.navbar.help.user.login.click()"><i class="fa fa-sign-in pull-left"></i> 登录</a></li>
                  <li ng-if="sessionUser.email"><a href="javascript:void(0)"
                      ng-click="vm.navbar.help.user.password.click()"><i class="fa fa-key pull-left"></i> 修改密码</a></li>
                  <li class="divider" ng-if="sessionUser.email"></li>
                  <li ng-if="sessionUser.email"><a href="javascript:void(0)"
                      ng-click="vm.navbar.help.user.logout.click()"><i class="fa fa-sign-out pull-left"></i> 退出</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="javascript:void(0)" ng-if="sessionUser.email">
              <i class="fa fa-user" ng-if="sessionUser.role != 'admin'"></i><i class="fa fa-users"
                  ng-if="sessionUser.role == 'admin'"></i> [{{sessionUser.email}}]
            </a>
            <a href="javascript:void(0)" ng-if="!sessionUser.email">
              <i class="fa fa-user-circle"></i> [牧云游客]
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- workbench -->
  <div class="workbench" ng-class="{'no-toolbar': !vm.navbar.view.toolbar.checked,
      'no-sidebar': !vm.navbar.view.sidebar.checked, 'no-statusbar': !vm.navbar.view.statusbar.checked}">
    <nav class="toolbar">
      <div class="btn-group menu-group">
        <button class="btn btn-default" title="切换目录"
            ng-click="vm.toolbar.sidebar.click()"><i class="fa fa-navicon"></i></button>
        <button class="btn btn-default" title="展开目录" ng-disabled="!vm.toolbar.expand.enabled"
            ng-click="vm.toolbar.expand.click()"><i class="fa fa-plus"></i></button>
        <button class="btn btn-default" title="折叠目录" ng-disabled="!vm.toolbar.collapse.enabled"
            ng-click="vm.toolbar.collapse.click()"><i class="fa fa-minus"></i></button>
        <button class="btn btn-default" title="目录链接" ng-disabled="!vm.toolbar.exchange.enabled"
            ng-click="vm.toolbar.exchange.click()"><i class="fa fa-exchange"></i></button>
      </div>
      <div class="btn-group">
        <button class="btn btn-default" title="新建" ng-disabled="!vm.toolbar.file.enabled"
            ng-click="vm.toolbar.file.click()"><i class="fa fa-file-o"></i></button>
        <button class="btn btn-default" title="打开" ng-disabled="!vm.toolbar.open.enabled" ngf-max-size="'5MB'"
             ngf-select="vm.toolbar.open.click($file)"><i class="fa fa-folder-open-o"></i></button>
        <button class="btn btn-default" title="保存" ng-disabled="!vm.toolbar.save.enabled"
            ng-click="vm.toolbar.save.click()"><i class="fa fa-save"></i></button>
      </div>
      <div class="btn-group">
        <button class="btn btn-default" title="撤销" ng-disabled="!vm.toolbar.undo.enabled"
            ng-click="vm.toolbar.undo.click()"><i class="fa fa-undo"></i></button>
        <button class="btn btn-default" title="重做" ng-disabled="!vm.toolbar.redo.enabled"
            ng-click="vm.toolbar.redo.click()"><i class="fa fa-repeat"></i></button>
        <button class="btn btn-default" title="剪切" ng-disabled="!vm.toolbar.cut.enabled"
            ng-click="vm.toolbar.cut.click()"><i class="fa fa-cut"></i></button>
        <button class="btn btn-default" title="复制" ng-disabled="!vm.toolbar.copy.enabled"
            ng-click="vm.toolbar.copy.click()"><i class="fa fa-copy"></i></button>
        <button class="btn btn-default" title="粘贴" ng-disabled="!vm.toolbar.paste.enabled"
            ng-click="vm.toolbar.paste.click()"><i class="fa fa-paste"></i></button>
      </div>
      <div class="extendbar"></div>
    </nav>
    <div class="main">
      <div class="sidebar">
        <ul id="note-tree" class="ztree"></ul>
        <!-- sidebar menu -->
        <nav class="contextmenu" contextmenu="#note-tree">
          <ul class="dropdown-menu">
            <li class="dropdown-submenu" ng-class="{'hover':vm.sidebar['new'].enabled}">
              <button class="btn btn-default" ng-disabled="!vm.sidebar['new'].enabled">
                  <i class="fa fa-file-o pull-left"></i> 新建</button>
              <ul class="dropdown-menu">
                <li><button class="btn btn-default" ng-click="vm.sidebar['new'].folder.click()">
                    <i class="fa fa-folder pull-left"></i> 文件夹</button></li>
                <li class="divider"></li>
                <li><button class="btn btn-default" ng-click="vm.sidebar['new'].file.click()">
                    <i class="fa fa-file pull-left"></i> 文件</button></li>
              </ul>
            </li>
            <li><button class="btn btn-default" ng-disabled="!vm.sidebar.open.enabled"
                ng-click="vm.sidebar.open.click()"><i class="fa fa-pencil-square-o pull-left"></i> 打开</button></li>
            <li class="divider"></li>
            <li><button class="btn btn-default" ng-click="vm.sidebar.rename.click()">
                <i class="fa fa-pencil pull-left"></i> 重命名</button></li>
            <li><button class="btn btn-default" ng-disabled="!vm.sidebar.copy.enabled"
                ng-click="vm.sidebar.copy.click()"><i class="fa fa-copy pull-left"></i> 复制</button></li>
            <li><button class="btn btn-default" ng-click="vm.sidebar.delete.click()">
                <i class="fa fa-trash-o pull-left"></i> 删除</button></li>
            <li class="divider"></li>
            <li><button class="btn btn-default" ng-disabled="!vm.sidebar.save.enabled"
                ng-click="vm.sidebar.save.click()"><i class="fa fa-save pull-left"></i> 保存</button></li>
            <li><button class="btn btn-default" ng-disabled="!vm.sidebar.saveAs.enabled"
                ng-click="vm.sidebar.saveAs.click()"><i class="fa fa-share-square-o pull-left"></i> 另存为...</button></li>
            <li class="divider"></li>
            <li><button class="btn btn-default" ng-disabled="!vm.sidebar.refresh.enabled"
                ng-click="vm.sidebar.refresh.click()"><i class="fa fa-refresh pull-left"></i> 刷新</button></li>
            <li class="divider"></li>
            <li><button class="btn btn-default" ng-click="vm.sidebar.history.click()">
                <i class="fa fa-history pull-left"></i> 历史...</button></li>
          </ul>
        </nav>
      </div>
      <div class="move-zone">
        <div class="separator"></div>
      </div>
      <div class="composite">
        <uib-tabset active="vm.editor.active" type="tabs" ng-show="vm.editor.files.length > 0">
          <uib-tab index="file.id" ng-repeat="file in vm.editor.files" template-url="editor-tab.html">
            <uib-tab-heading>
              <i class="fa fa-asterisk changed" ng-if="file.changed"></i>
              <span>{{file.name}}</span>
              <i class="fa fa-remove closeable" ng-class="{'active': file.closeable}" ng-click="vm.editor.close(file)"></i>
            </uib-tab-heading>
            <div ng-switch="file.extension" class="edit-zone">
              <summernote file="file" context="vm.context" ng-switch-when=".sdoc"></summernote>
              <handsontable file="file" context="vm.context" ng-switch-when=".hxls"></handsontable>
              <zrender file="file" context="vm.context" ng-switch-when=".zsvg"></zrender>
              <markdown file="file" context="vm.context" ng-switch-when=".md"></markdown>
              <aceeditor file="file" context="vm.context" ng-switch-default></aceeditor>
            </div>
          </uib-tab>
          <uib-tab index="-1" template-url="files-tab.html"></uib-tab>
        </uib-tabset>
      </div>
    </div>
    <div class="statusbar">
      <div class="container-fluid" ng-show="vm.editor.files.length > 0">
        <div class="row">
          <div class="col-xs-8 col-lg-9">正在编辑：{{vm.statusbar.link}}</div>
          <div class="col-xs-4 col-lg-3" ng-if="vm.statusbar.statuses.length > 0">
            <span ng-repeat="status in vm.statusbar.statuses"><i class="divider"></i>{{status}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="editor-tab.html">
    <li id="{{$parent.file.id}}" ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item">
      <a href="javascript:void(0)" ng-click="select($event)" class="nav-link" uib-tab-heading-transclude
          ng-mouseenter="$parent.file.closeable = true" ng-mouseleave="$parent.file.closeable = false"
          title="{{$parent.file.name}}" ng-dblclick="$parent.vm.toggleFullscreen()">{{heading}}</a>
      <nav class="contextmenu" contextmenu=">a">
        <ul class="dropdown-menu">
          <li><button class="btn btn-default" ng-click="$parent.vm.editor.close($parent.file)">关闭</button></li>
          <li><button class="btn btn-default" ng-disabled="$parent.vm.editor.files.length < 2"
              ng-click="$parent.vm.editor.closeOthers($parent.file)">关闭其他</button></li>
          <li class="divider"></li>
          <li><button class="btn btn-default" ng-click="$parent.vm.editor.closeAll()">全部关闭</button></li>
        </ul>
      </nav>
    </li>
  </script>
  <script type="text/ng-template" id="files-tab.html">
    <li ng-class="[{active: active, disabled: disabled}, classes]" class="dropdown file-list fixed">
      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" uib-tab-heading-transclude>
        <i class="fa fa-caret-down"></i>
      </a>
      <filelist files="$parent.vm.editor.files" on-selected="$parent.vm.editor.open"></filelist>
    </li>
  </script>
</div>
